<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<th:block th:include="include :: header('新增活动')" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
	<form class="form-horizontal m" id="form-activity-add">
		<!-- 新增：把当前登录用户 id 带出去 -->
		<input type="hidden" name="userId" th:value="${@permission.getUserId()}" />
		<!-- 活动标题 -->
		<div class="form-group">
			<label class="col-sm-3 control-label is-required">活动标题：</label>
			<div class="col-sm-8">
				<input class="form-control" type="text" name="title" id="title" required>
			</div>
		</div>

		<!-- 运动类别 -->
		<div class="form-group">
			<label class="col-sm-3 control-label is-required">运动类别：</label>
			<div class="col-sm-8">
				<select name="category" id="category" class="form-control" required>
					<option value="">请选择</option>
					<option value="羽毛球">羽毛球</option>
					<option value="篮球">篮球</option>
					<option value="足球">足球</option>
					<option value="跑步">跑步</option>
				</select>
			</div>
		</div>

		<!-- 活动地点 -->
		<div class="form-group">
			<label class="col-sm-3 control-label is-required">活动地点：</label>
			<div class="col-sm-8">
				<input class="form-control" type="text" name="locationName" id="locationName" required>
			</div>
		</div>

		<!-- 活动日期（时间戳） -->
		<div class="form-group">
			<label class="col-sm-3 control-label is-required">活动日期：</label>
			<div class="col-sm-8">
				<input class="form-control date" type="text" name="eventDateStr" id="eventDateStr"
					   placeholder="yyyy-MM-dd" required>
			</div>
		</div>

		<!-- 开始时间（时间戳） -->
		<div class="form-group">
			<label class="col-sm-3 control-label is-required">开始时间：</label>
			<div class="col-sm-8">
				<input class="form-control time" type="text" name="startTimeStr" id="startTimeStr"
					   placeholder="HH:mm" required>
			</div>
		</div>

		<!-- 结束时间（时间戳） -->
		<div class="form-group">
			<label class="col-sm-3 control-label is-required">结束时间：</label>
			<div class="col-sm-8">
				<input class="form-control time" type="text" name="endTimeStr" id="endTimeStr"
					   placeholder="HH:mm" required>
			</div>
		</div>

		<!-- 团购价 -->
		<div class="form-group">
			<label class="col-sm-3 control-label is-required">团购价(元)：</label>
			<div class="col-sm-8">
				<input class="form-control" type="number" step="0.01" name="groupPrice" id="groupPrice" required>
			</div>
		</div>

		<!-- 原价 -->
		<div class="form-group">
			<label class="col-sm-3 control-label is-required">原价(元)：</label>
			<div class="col-sm-8">
				<input class="form-control" type="number" step="0.01" name="originPrice" id="originPrice" required>
			</div>
		</div>

		<!-- 最大人数 -->
		<div class="form-group">
			<label class="col-sm-3 control-label is-required">最大人数：</label>
			<div class="col-sm-8">
				<input class="form-control" type="number" min="1" name="maxPeople" id="maxPeople" required>
			</div>
		</div>

		<!-- 最小人数 -->
		<div class="form-group">
			<label class="col-sm-3 control-label is-required">最少人数：</label>
			<div class="col-sm-8">
				<input class="form-control" type="number" min="1" name="minPeople" id="minPeople" required>
			</div>
		</div>

		<!-- 封面图 -->
		<div class="form-group">
			<label class="col-sm-3 control-label">封面图：</label>
			<div class="col-sm-8">
				<input class="form-control" type="text" name="cover" id="cover" placeholder="http://...">
			</div>
		</div>

		<!-- 描述 -->
		<div class="form-group">
			<label class="col-sm-3 control-label">描述：</label>
			<div class="col-sm-8">
				<textarea name="description" id="description" class="form-control"></textarea>
			</div>
		</div>

<!--		&lt;!&ndash; 状态 &ndash;&gt;-->
<!--		<div class="form-group">-->
<!--			<label class="col-sm-3 control-label">状态：</label>-->
<!--			<div class="col-sm-8">-->
<!--				<div class="radio-box" th:each="dict : ${@dict.getType('sys_normal_disable')}">-->
<!--					<input type="radio" th:id="${dict.dictCode}+'_status'" name="status"-->
<!--						   th:value="${dict.dictValue}" th:checked="${dict.default}">-->
<!--					<label th:for="${dict.dictCode}+'_status'" th:text="${dict.dictLabel}"></label>-->
<!--				</div>-->
<!--			</div>-->
<!--		</div>-->

	</form>
</div>

<th:block th:include="include :: footer" />
<script type="text/javascript">
	var prefix = ctx + "system/activity";

	layui.use(['laydate'], function () {
		var laydate = layui.laydate;
		laydate.render({ elem: '#eventDateStr', type: 'date' });
		laydate.render({ elem: '#startTimeStr', type: 'time', format: 'HH:mm' });
		laydate.render({ elem: '#endTimeStr',   type: 'time', format: 'HH:mm' });
	});

	$("#form-activity-add").validate({
		onkeyup: false,
		rules: {
			title: { required: true },
			category: { required: true },
			locationName: { required: true },
			eventDateStr: { required: true },
			startTimeStr: { required: true },
			endTimeStr: { required: true },
			groupPrice: { required: true, number: true, min: 0.01 },
			originPrice: { required: true, number: true, min: 0.01 },
			maxPeople: { required: true, digits: true, min: 1 },
			minPeople: { required: true, digits: true, min: 1 }
		},
		messages: {},
		focusCleanup: true
	});

	function submitHandler() {
		if ($.validate.form()) {
			$.operate.save(prefix + "/add", $('#form-activity-add').serialize());
		}
	}
</script>
</body>
</html>
